<template>
  <view class="user">
    <scroll-view scroll-y @scrolltolower="scrollTolower" class="scroll">
      <view class="songPeople_container">
        <view class="keysPeopleInfo" v-for="item in userProfiles" :key="item.userId">
          <image :src="item.avatarUrl" mode=""></image>
          <text style="color: #668ebd;">{{ item.nickname }}</text>
          <text class="iconfont icon-nanxing" v-if="item.gender === 1" style="margin-left: 20rpx;"></text>
          <text class="iconfont icon-nv" v-else style="margin-left: 20rpx;"></text>
          <view class="isPay">
            <text v-if="item.followed === true" class="pay" @click="payAttention('wyf', item.userId, item)">已关注</text>
            <text v-else class="pay" @click="payAttention(1, item.userId, item)">{{ '   +' }}关注</text>
          </view>
        </view>
      </view>
      <u-loadmore :status="status" icon-type />
    </scroll-view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import { getSearchKeytype } from '@/api/getSearchKeytype.js'
export default {
  name: 'user',
  created() {
    setTimeout(() => {
      this.getUserList(1002, this.keyValue, this.limit)
    }, 1000)
  },
  data() {
    return {
      limit: 10,
      t: 0,
      page: 1,
      totalPage: 0,
      status: 'loadmore',
      userProfiles: []
    }
  },
  computed: {
    ...mapState(['keyValue']),
    ...mapState('login', ['cookie'])
  },
  methods: {
    async getUserList(type, value, limit) {
      const { data: res } = await getSearchKeytype(type, value, limit)
      // console.log(res)
      if (res.code !== 200) return uni.$showMsg('用户列表获取失败')
      this.totalPage = Math.ceil(res.result.userprofileCount / res.result.userprofiles.length)
      this.userProfiles = res.result.userprofiles
    },
    scrollTolower() {
      if (this.page >= this.totalPage) {
        // console.log(2222)
        this.status = 'nomore'
        uni.showToast({
          title: '没有下一页了'
        })
      } else {
        setTimeout(() => {
          // console.log(1111)
          this.page++
          this.limit += 10
          this.status = 'loading'
          this.getUserList(1002, this.keyValue, this.limit)
        }, 1000)
      }
    },
    async payAttention(t, id, item) {
      // console.log(t)
      this.t = t
      if (!this.cookie) {
        uni.$showMsg('请先登录哦')
      } else {
        const { data: res } = await uni.$http.get('follow', { id: id, t: this.t, timestamp: new Date().getTime() })
        // console.log(res)
        if (this.t === 1) {
          if (res.code !== 200) {
            if (res.code == 250) {
              return uni.$showMsg(res.message + res.dialog.subtitle)
            }
            return uni.$showMsg('关注失败')
          } else {
            item.followed = res.user.followed
          }
        } else {
          if (res.code !== 200) {
            return uni.$showMsg('取关失败')
          } else {
            item.followed = false
            // console.log(this.artists)
          }
        }
        // console.log(res)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.scroll {
  height: calc(100vh - 160rpx);
}
.user {
  background-color: #ffffff;
}
.songPeople_container {
  // margin: 40rpx;
}
.keysPeopleInfo {
  display: flex;
  // align-items: center;
  margin: 30rpx 20rpx 0 20rpx;
  border-bottom: 5rpx solid #f7f7f7;
  // height: 80rpx;
}
.keysPeopleInfo text {
  line-height: 80rpx;
  margin-left: 30rpx;
}
.keysPeopleInfo image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
}
.isPay {
  position: absolute;
  right: 100rpx;
}
.isPay text {
  border: 2rpx solid #fe6f6f;
  border-radius: 20rpx;
  padding: 5rpx 20rpx;
  font-size: 20rpx;
  color: #fe6f6f;
}
</style>
